@charset "UTF-8";
@import url('displaFlex');





@safeWidth:1100px;        //安全宽度

@safeMainColor:#01cbe9;       //主题颜色
@safeMinorColor:#ff6f6e;       //主题颜色

@borderColor:#dcdcdc;     //边框颜色
@25mainWordColor:#252525;   //文字主体颜色
@4aviceWordColor:#4a4a4a;   //文字副级颜色
@99minorWordColor:#999999;  //文字次要颜色

@letwinW:420/1920;
@letwinH:420/500;

.w_h(@w_h){
  width: @w_h ;
  height: @w_h ;
}

//文字溢出
//多行
.wordSpaceClamp(@number){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:@number;
  overflow: hidden;
}
//单行
.wordSpaceClamp{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.hover(@color){
  &:hover{
    background-color: @color;
    color: #FFFFFF;
    text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    transition: all 1s cubic-bezier(0, 0.72, 0.35, 1.12);
  }
}

.nav{
  width: @safeWidth;
  margin:20px auto;
  a{
    font-size: 16px;
    color: #4a4a4a;
  }
  :nth-child(1){
    padding-right: 15px;
    background: url("../publicImg/jiantou-you-hui@2x.png") no-repeat right;
    margin-right: 10px;
  }


  :nth-child(2){
    padding-right: 15px;
    background: url("../publicImg/jiantou-you-hui@2x.png") no-repeat right;
    margin-right: 10px;
  }

}


.group{

  position: relative;
  &:after{
    content: '';
    width: 100%;
    border-bottom: 2px solid @safeMainColor;
    position: absolute;
    left: 0;
    bottom: -10px;
  }


}
.indexHtml{
  margin-left: 30px;
}

.longBannerImg{
  width:@safeWidth;

  margin: 30px auto;
  img{
    display: block;
    width: 100%;
  }
}



main{
  width:@safeWidth;
  margin: 0 auto;
  .displayFlex;
  .flex-direction-row;
  .flex-justify-between;
  .leftBox{
    width: 712px;
    padding:30px 24px;
    border:1px solid @borderColor;
    border-radius: 6px;
    .postTitleInfo{
      .postTitle{
        font-size:20px;
        color:@25mainWordColor;
        margin-bottom: 10px;
      }
      .postInfo{
        .displayFlex;
        .flex-direction-row;
        .flex-justify-between;
        padding-bottom: 5px;

        .postWriterInfo{
          .displayFlex;
          .flex-direction-row;
          span{
            display: block;
            .flex-justify-align;

          }
          .writer{
            font-size: 14px;
            color:@safeMainColor;
            margin-right:5px
          }

          .time{
            font-size: 14px;
            color:@99minorWordColor;
          }
        }

        .postNumberInfo{
          .displayFlex;
          .flex-direction-row;

          span{
            font-size: 14px;
            color: @99minorWordColor;
            margin-left: 20px;
            padding-left: 23px;

          }

          :nth-child(1){
            background: url("../publicImg/shequ-dianzan@2x.png") no-repeat left;
            background-size: 17px 18px;
          }

          :nth-child(2){
            background: url("../publicImg/shequ-liulan@2x.png") no-repeat left;
            background-size: 16px 16px;
          }


          :nth-child(3){
            background: url("../publicImg/shequ-pinglun@2x.png") no-repeat left;
            background-size: 17px 18px;
          }



        }


      }

      border-bottom: 1px solid @borderColor;


    }

    .postContent{
      font-size: 16px;
      color:@25mainWordColor;
      min-height: 100px;
      margin-bottom: 70px;
      img{
        text-align: center;
        max-width: 100%;
        max-height: 100%;
      }
    }

    .otherPost{
      width: 672px;
      height: 100px;
      padding: 20px;
      border:1px solid @borderColor;
      h2{
        font-size: 20px;
        color: @4aviceWordColor;
        margin-bottom: 24px;
      }

      .otherPostInner{
        .displayFlex;
        .flex-direction-row;
        .flex-justify;
        .flex-wrap;
        a{
          font-size: 16px;
          color:@4aviceWordColor;
          display: block;
          width:320px ;
          height: 20px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp:1;
          overflow: hidden;
          margin-bottom: 12px;
          margin-right: 10px;

          &:hover{
            text-decoration: underline;
          }

        }

      }




    }

    .zanBox{
      width: 100%;
      .displayFlex;
      .flex-direction-row;
      .flex-justify-between;
      .flex-align-items;
      .zanNumber{
        /* min-width: 108px; */
        /* padding: 0 32px; */
        height: 32px;
        display: block;
        font-size: 16px;
        color: #4a4a4a;
        background: url(../publicImg/shequ-dianzan-icon@2x.png) no-repeat 14px 7px;
        border: 1px solid #ff6f6e;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        /* padding: 2px 35px; */
        padding-left: 38px;
        padding-right: 10px;
        cursor:pointer;
      }
      margin:40px 0;

      :nth-child(1){
        position: relative;
        &:before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: '';
          width: 152px;
          height: 1px;
          border-top: 2px dotted @borderColor;

        }
      }



      :nth-child(3){
        position: relative;
        &:before {
          position: absolute;
          bottom: 0;
          right: 0;
          content: '';
          width: 152px;
          height: 1px;
          border-top: 2px dotted @borderColor;

        }
      }
      

    }

    .loginUserComment{
      .title{
        font-size: 18px;
        color: @25mainWordColor;
        .displayFlex;
        .flex-align-items;
        i{
          width: 5px;
          height: 18px;
          background: @safeMinorColor;
          display: inline-block;
          margin-right: 10px;
        }
      }

      .inner{
        width: 712px;
        min-height: 240px;
        border:1px solid @borderColor;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        textarea{
          width: 98%;
          min-height: 144px;
          text-indent: 14px;
          resize:none;
          color: @4aviceWordColor;
          border:none;
          margin-top: 5px;

        }
        .imgListButton{
          width: 100%;
          height:70px;
          .displayFlex;
          .flex-direction-row;
          .flex-align-end;
          .flex-justify-between;



          .imgList{
            min-width:70px;
            .displayFlex;
            .flex-direction-row;

            .imgItem{
              position: relative;
              img{
                .w_h(70px);
                border-radius: 4px;
                margin:0 10px;
              }
              i{
                position: absolute;
                top: -5px;
                right: -5px;

                height: 20px;
                width: 20px;
                background-color: @99minorWordColor;
                color: white;
                font-size: 12px;
                .flex-justify-align;
                border-radius: 50%;
                z-index:100;
                &:hover{
                  cursor: pointer;
                  background-color: @safeMinorColor;
                }
              }
            }

            .postImg{
              .w_h(70px);
              background: url("../publicImg/pinlun-tianjiazhaopian@2x.png") no-repeat center;
              background-size:contain;
              position: relative;
              margin:0 10px;

              input{
                .w_h(70px);
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                z-index: 20;
              }
              img{
                margin: 0;
                .w_h(70px);
                border-radius: 4px;
              }

            }


          }


          button{
            width: 48px;
            height: 24px;
            font-size: 14px;
            color: white;
            border-radius: 4px;
            background-color: @safeMainColor;
            margin-right: 14px;
            cursor: pointer;
          }



        }
        margin-top:15px;
        position: relative;
        .notLoginBox{
          position: absolute;
          width: 100%;
          height: 100%;
          .flex-justify-align;
          top: 0;
          left: 0;
          z-index: 100;
          span{
            font-size: 16px;
          }
          .notLogin{
            background-color: @safeMinorColor;
            color:white;
            .flex-justify-align;
            width:48px;
            height: 24px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
          }
        }

      }

     margin-bottom: 26px;

    }

    .postCommentItem{

      .postCommentOne{


        .displayFlex;
        .flex-direction-column;
        border-bottom:1px solid @borderColor;
        padding: 24px 0 24px 24px;
        border-radius: 6px;
        cursor: pointer;
        margin-bottom: 20px;


        //用户信息
        .authorInfo{
          .displayFlex;
          .flex-direction-row;
          .flex-justify-between;
          margin-bottom: 10px;
          .info{
            .displayFlex;
            .flex-direction-row;
            img{
              display: block;
              .w_h(36px);
              margin-right: 20px;
              border-radius: 6px;
            }
            .infoText{
              .displayFlex;
              .flex-direction-row;
              .text{
                .userName{
                  font-size: 16px;
                  color: @25mainWordColor;
                  padding-right: 30px;
                }
                time{
                  font-size: 12px;
                  color: @99minorWordColor;
                }

              }
            }
          }
          .replyPraise{
            margin-right: 24px;
            .displayFlex;
            .flex-direction-row;
            .flex-align-items;
            span{
              font-size: 14px;
              color: @99minorWordColor;
              cursor: pointer;

            }
            .reply{
              padding-right: 10px;
            }
            .praiseCom{
              padding-left: 10px;
              border-left: 1px solid @borderColor;
            }

          }

        }
        //评论内容
        .commentContent{
          margin-left: 55px;
          width: 635px;
          .postTitle{
            font-size: 18px;
            color: @25mainWordColor;
            margin-bottom: 10px;

          }
          .userText{
            font-size: 16px ;
            color: @4aviceWordColor;
            display: inline;

          }
          .adminText{
            .displayFlex;
            .flex-direction-row;
            img{
              width: 218px;
              height: 144px;
              border-radius: 6px;
              margin-right: 12px;
            }
            p{
              width: 420px;

            }

          }


        }
        //用户图片
        .postImg{
          margin-left: 55px;
          width: 635px;
          margin-top: 20px;
          .imgList{
            .displayFlex;
            .flex-direction-row;
            li{
              margin-right: 10px;
              position: relative;
              overflow: hidden;
              .w_h(140px);
              border-radius: 6px;
              img{
                width: 100%;
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);

              }
            }
          }


        }

        //评论的交互信息  其他用户二级评论
        .commentInfoItem{
          margin-left: 55px;
          margin-top: 10px;
          width: 595px;

          padding: 20px;

          border-radius: 6px;
          background:#f6f6f6;
          .postCommentTwo{

            margin-bottom: 20px;
            //border-bottom: 1px solid @borderColor;

            .displayFlex;
            .flex-direction-row;

            .postCommentTwoImg{
              .w_h(36px);
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              border-radius: 4px;
              margin-right: 10px;
            }
            .commentTwoContent{
              width:587px;
              .userNameTime{
                margin-bottom: 10px;
                margin-top: 5px;

                .username{
                  font-size: 14px;
                  color: @safeMainColor;
                  padding-right: 25px;
                }
                .replayCommentTwo,time{
                  font-size: 14px;
                  color:#999999;
                }
                .replayCommentTwo{padding-left:10px}
                time{
                  padding-right: 10px;
                  border-right: 1px solid @borderColor;
                }

              }
              .postCommentTwoText{
                font-size: 14px ;
                color: @4aviceWordColor;
                display: inline;
                .postCommentTwoName{
                  font-size:14px ;
                  color: @safeMainColor;
                  display: inline;
                }

              }
              //  发送三级评论
              .postCommentTreeSend{
                width:536px;
                min-height: 147px;
                border:1px solid @borderColor;
                border-radius: 6px;
                margin-top: 30px;
                margin-bottom: 20px;
                padding-bottom: 15px;
                background-color: white;
                //display: none;
                .replayPostCommentTwo{
                  .displayFlex;
                  .flex-direction-row;
                  padding-left: 26px;
                  padding-top: 5px;
                  span{
                    font-size: 14px;
                    color:@4aviceWordColor;
                  }
                  .replyUserName{
                    color: @safeMainColor;
                  }

                }
                .postCommentTreeSendBox{
                  min-height: 100px;
                  width:98%;
                  text-indent: 21px;
                  resize: none;
                  border: none;
                  margin-left: 3px;
                  font-size: 14px;
                  color:@4aviceWordColor;

                  &:focus{
                    border: none;
                    outline:none;
                  }
                }
                .btnPostCommentTree{
                  width:48px;
                  height: 24px;
                  color: #FFFFFF;
                  background-color: @safeMainColor;
                  border-radius: 4px;
                  margin-right: 24px;

                }

                .btnPostCommentTreeClose{
                  width:48px;
                  height: 24px;
                  color: #FFFFFF;
                  background-color: @safeMinorColor;
                  border-radius: 4px;
                  margin-right: 24px;

                }







              }

            }
          }
          .postCommentTree{

            margin-bottom: 20px;
            //border-bottom: 1px solid @borderColor;
            .displayFlex;
            .flex-direction-row;

            .postCommentTwoImg{
              .w_h(36px);
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              border-radius: 4px;
              margin-right: 10px;
            }
            .commentTwoContent{
              width:587px;
              .userNameTime{
                margin-bottom: 10px;
                margin-top: 5px;

                .username{
                  font-size: 14px;
                  color: @safeMainColor;
                  padding-right: 25px;
                }
                .replayCommentTwo,time{
                  font-size: 14px;
                  color:#999999;
                }
                .replayCommentTwo{padding-left:10px}
                time{
                  padding-right: 10px;
                  border-right: 1px solid @borderColor;
                }

              }
              .postCommentTwoText{
                font-size: 14px ;
                color: @4aviceWordColor;
                display: inline;
                .postCommentTwoName{
                  font-size:14px ;
                  color: @safeMainColor;
                  display: inline;
                }

              }



            }
          }

          .moreComment{
            font-size: 14px;
            color: @safeMinorColor;
            padding-right: 14px;
            background: url("../publicImg/jiantou-you-hong@2x.png") no-repeat right;
            -webkit-background-size: 16px 17px;
            background-size: 9px 13px;
            cursor:pointer;
          }

        }
      //  发送二级评论
        .postCommentTwoSend{
          width:632px;
          min-height: 134px;
          margin-left: 55px;
          border:1px solid @borderColor;
          border-radius: 6px;
          margin-top: 30px;
          margin-bottom: 20px;
          padding-bottom: 15px;
          //display: none;
          .postCommentTwoSendBox{
            min-height: 100px;
            width:98%;
            text-indent: 24px;
            resize: none;
            border: none;
            margin-left: 3px;


            &:focus{
              border: none;
              outline:none;
            }
          }
          .btnPostCommentTwo{
            width:48px;
            height: 24px;
            color: #FFFFFF;
            background-color: @safeMainColor;
            border-radius: 4px;
            margin-right: 24px;

          }

          .btnPostCommentTwoClose{
            width:48px;
            height: 24px;
            color: #FFFFFF;
            background-color: @safeMinorColor;
            border-radius: 4px;
            margin-right: 24px;

          }







        }


      }

    }








  }


  .rightBox{
    width: 310px;
    .displayFlex;
    .flex-direction-column;
    .UserCenterInfo{
      .displayFlex;
      .flex-direction-column;
      margin-bottom: 60px;
      width:305px;
      height: 414px;
      border-radius: 4px;
      border:1px solid @borderColor;
      background-color: #f6f6f6;
      .flex-align-items;
      .userName{
        font-size: 20px;
        color:@safeMainColor;
        margin-top: 30px;
        margin-bottom: 20px;

      }
      .userImg{
        .w_h(130px);
        border-radius: 50%;
        margin-bottom: 30px;
      }
      .userPostCommentFans{
        .displayFlex;
        .flex-direction-row;
        margin-bottom: 50px;
        div{
          .displayFlex;
          .flex-direction-column;
          .flex-align-items;
          height: 38px;
          width:105px;
          span{
            font-size: 14px;
            color:@25mainWordColor;
            line-height: 19px;
          }

        }
        .commentNumber{
          border-right: 1px solid @borderColor;
          border-left: 1px solid @borderColor;
        }
      }
      .rank{
        font-size: 14px;
        color: @99minorWordColor;
        padding-right: 30px;
        margin-bottom: 20px;

      }
      .focusOn{
        font-size: 16px;
        color:@safeMinorColor;

      }


    }

    .rightNewProduct{
      width: 290px;
      height: 715px;
      border: 1px solid @borderColor;
      border-radius: 6px;
      padding: 0 10px;
      .toNewLoans{
        display: block;
        height: 50px;
        width: 100%;
        font-size: 24px;
        line-height: 50px;
        text-align: left;
        background: white url("../publicImg/jiantou-you-lan@2x.png") no-repeat right;
        background-size: 10px 17px;
        border-bottom: 1px solid #eeeeee;
        color: @25mainWordColor;
        margin-bottom: 37px;

      }

      .NewLoansProductList{

        .loansItem{
          .displayFlex;
          .flex-align-items;
          .flex-direction-row;
          margin-bottom: 30px;
          .loansLogo{
            display: block;

            .w_h(72px);
            border-radius: 6px;


          }
          .loanInfo{
            .displayFlex;
            .flex-align-items;
            .flex-direction-row;
            .flex-justify-between;
            width: 210px;
            margin-left: 10px;

            .loanInfoLeft{
              h3{
                font-size: 18px;
                color: @25mainWordColor;
                line-height: 35px;
                font-weight: normal;
              }
              p{
                font-size: 14px;
                color: @4aviceWordColor;
                i{
                  color: @safeMinorColor;
                }
              }
            }
            .loanInfoRight{
              p{
                font-size: 16px;
                color: @99minorWordColor;
                margin-bottom: 15px;
              }
              a{
                display: block;
                width:58px ;
                height: 36px;
                color: white;
                background-color: @safeMinorColor;
                text-align: center;
                line-height: 36px;
                border-radius: 6px;
                margin-top: 36px;
                font-size: 18px;
              }
            }




          }

        }
      }



    }


    .dajindaiRightBox{

      width: 270px;
      height: 384px;
      border: 1px solid @borderColor;
      border-radius: 6px;
      padding: 30px 20px;
      margin-top:60px;
      margin-bottom:60px;
      .displayFlex;
      .flex-direction-column;
      .dajindaiImg{
        .displayFlex;
        .flex-direction-row;
        .flex-justify-between;
        .flex-align-items;
        margin-bottom: 50px;
        img{
          .w_h(72px);
          border-radius: 6px;

        }
        .text{
          p{
            font-size: 16px;
            color:#252525;
          }
        }
      }

      input{
        width: 270px;
        height: 48px;
        text-indent: 20px;
        background-color: white;
        border-radius: 6px;
        margin-bottom: 20px;
        cursor: pointer;
        line-height: 48px;
        border:1px solid @borderColor;
      }


      .loansInput{
        background: #ffffff url("../publicImg/jiantou-xia-hui@2x.png") no-repeat 240px 20px;
        background-size: 18px 9px;
        cursor: pointer;

      }

      .btndajindai{
        width:180px;
        height: 48px;
        background-color: #ffae00;
        color: white;
        font-size: 18px;
         text-align: center;
        margin: 0 auto;
        line-height: 48px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        cursor: pointer;
      }


    }




  }



}

